<template>
	<view class="jxz">
		<template v-if="detail">
			<view class="my-video">
				<u--image height="1332rpx" width="100%" src="../../static/img/jxz-cover.jpg"></u--image>
				<u-icon name="play-circle" size="48" class="play" color="#ffffff" @click="isShowVideo = true"></u-icon>
			</view>
			<view class="p-20 des m-t-20">
				<view class="flex-no-horizontal des-item">
					<view class="f-17">藏品信息</view>
					<view class="tag f-s" style="width: 65%;">{{detail.desc}}</view>
				</view>
				<view class="flex-no-horizontal des-item">
					<view class="f-15">藏品名称</view>
					<view class="f-15">{{detail.nftname}}</view>
				</view>
				<view class="flex-no-horizontal des-item">
					<view class="f-15">拥有者</view>
					<view class="f-15">{{detail.personName}}</view>
				</view>
				<view class="flex-no-horizontal des-item">
					<view class="f-15">创作者</view>
					<view class="f-15">{{detail.author}}</view>
				</view>
				<view class="flex-no-horizontal des-item">
					<view class="f-15">发行人</view>
					<view class="f-15">{{detail.man}}</view>
				</view>
				<view class="flex-no-horizontal des-item">
					<view class="f-15">发行时间</view>
					<view class="f-15">{{detail.create_time}}</view>
				</view>
				<view class="flex-no-horizontal des-item hash">
					<view class="f-15">区块链信息</view>
					<view class="f-15 hash-right" @click="copy">{{detail.nftid}}</view>
				</view>
				<u-divider lineColor="#FFFFFF"></u-divider>
				<view class="f-xxs text-center">关注公众号【轻松小镇】，加入社区第一时间获取后续玩法咨询</view>
			</view>
		</template>
		<u-empty v-else class="full-height"></u-empty>
		<video-dlg src="https://cdn3.relaverse.cn/appfile/jxz.mp4" :show="isShowVideo"
					poster="../../static/img/jxz-cover.jpg" :height="666"></video-dlg>
	</view>
</template>

<script>
	import {
		getJxzDetail
	} from '../../api/collection.js'
	import videoDlg from './common/videoDlg.vue'
	export default {
		components: { videoDlg },
		data () {
			return { 
				detail: null,
				isShowVideo: false
			}
		}, 
		async onLoad() {
			uni.showLoading({
				title: '加载中请稍后...'
			})
			try {
				const res = await getJxzDetail()
				if (res.data.data) {
					res.data.data[0].create_time = uni.$u.timeFormat(res.data.data[0].create_time, 'yyyy-mm-dd')
					this.detail = res.data.data[0]
				}
				uni.hideLoading()
			} catch (e) {
				console.log(e)
				uni.hideLoading()
				uni.showToast({
					title: e.data || e.message,
					icon: 'none'
				})
			}
		},
		methods: {
			copy () {
				uni.setClipboardData({
					data: this.detail.nftid,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jxz{
		min-height: 100%;
		background-color: #000000;
		color: white;
		.my-video{
			width: 100%;
			height: 1332rpx;
			position: relative;
			.play{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		
		.f-15{
			font-size: 15px;
		}
		.des{
			.des-item{
				justify-content: space-between;
				margin-bottom: 40rpx;
				.tag{
					background: #FFFFFF;
					border-radius: 6rpx;
					padding: 4rpx 15rpx;
					color: #000000;
				}
				.hash{
					align-items: flex-start;
					.hash-right{
						width: 65%;
						word-break: break-word;
					}
				}
			}
		}
	}
</style>
